<template>
  <div>
    <Row>
      <p>
        <a class="back-title mr30" @click="closeCurrentPage">
          <Icon type="ios-arrow-back" style="margin: 0 0 2px 0" />返回目录
        </a>
      </p>
      <Col span="12">
        <Table :columns="columns" :data="data" border />
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: "table-base",
  data() {
    return {
      backRoute: "",
      columns: [
        {
          type: "index",
          title: "序号",
          width: 80
        },
        {
          key: "name",
          title: "姓名",
          minWidth: 160
        },
        {
          key: "className",
          title: "班级",
          minWidth: 160
        },
        {
          key: "studentNo",
          title: "学号",
          width: 160
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: []
    };
  },
  methods: {
    init() {
      this.getDataList();
      this.backRoute = this.$route.params.backRoute;
      console.log(this.backRoute);
    },
    // 关闭当前页面
    closeCurrentPage() {
      this.$store.commit("closeTag", this.$route.name);
      localStorage.pageOpenedList = JSON.stringify(
        this.$store.state.app.pageOpenedList
      );
      this.$router.push({
        name: this.backRoute
      });
    },
    show(index) {
      this.$Modal.info({
        title: "学生基本信息",
        content: `姓名：${this.data[index].name}<br>班级：${this.data[index].className}<br>学号：${this.data[index].studentNo}`
      });
    },
    remove(index) {
      this.data.splice(index, 1);
    },
    getDataList() {
      this.data = new Array(30).fill({
        className: "一年级1班",
        name: "张三",
        studentNo: "2019136521521"
      });
    }
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      if (to.name == this.$route.name) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  }
};
</script>
